<template>
  <div id="container" v-title data-title="微信团购后台管理系统-首页">
    <section id="img1" class="img">微信商城后台管理系统</section>
    <section id="content1">重庆工程学院</section>
    <section id="img2" class="img">毕业设计</section>
    <section id="content2">基于SpringBoot实现的微信团购小程序后台</section>
    <section id="img3" class="img">Web端后台管理</section>
    <section id="footer">快速进行配置微信小程序所需要的各种数据，极大减少了小程序开发人员的后台开发成本，提高了工作效率</section>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {

    };
  },
  methods: {

  },
};
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  ::-webkit-scrollbar{
    display: none;
  }
  #container {
    width: 100vm;
    height: auto;
  }
  section {
    color: rgba(255, 255, 255, 0.55);
    height: 100vh;
    display: flex;
    font-size: 20vh;
    justify-content: center;
    align-items: center;
  }

  section #content1{
    font-size: 12vh;
    background: rgba(145, 215, 229, 0.76);
    color: #2b2f3a;
  }
  section #content2{
    font-size: 8vh;
    text-align: center;
    background: rgba(196, 178, 241, 0.71);
    color: #2b2f3a;
  }
  section #footer{
    font-size: 5vh;
    text-align: center;
    background: rgba(243, 189, 180, 0.72);
    color: #2b2f3a;
  }
  .img {
    background-size: auto;
    overflow: hidden;
    font-size: 8vh;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    max-width: 100%;
    user-select: none;
    cursor: default;
  }
  #img1 {
    background-image: url("../assets/images/1.jpg");
  }
  #img2 {
    background-image: url("../assets/images/2.jpg");
  }
  #img3 {
    background-image: url("../assets/images/3.jpg");
  }
</style>

